<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css"   th:href="@{/css/viewer.css}">
		<link rel="stylesheet" type="text/css"  th:href="@{/css/paging.css}">
		<style>
		* {
				margin: 0;
				padding: 0;
			}
			
			#images {
				margin: 0 auto;
				padding: 10px;
				width: 95%;
				border: 1px salmon solid;
				/*开启弹性布局*/
				display: flex;
				/*wrap：换行，第一行在上方。*/
				flex-wrap: wrap;
			justify-content:space-around;
				list-style-type:none
				
			}
			.album {
				width: 200px;
				height: 200px;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				margin: 15px;
					box-shadow: 1px 1px 5px silver;
			}
			.album:hover{
				transform: scale(1.1);
				cursor: pointer;
				box-shadow: 2px 4px 10px slategray;
			}
			
			.button1 {
				margin-top: 10px;
				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				/* box-shadow: 1px 1px 5px silver; */
				border-radius: 10px;
				margin-left: 20px;
			}
			
			.button1:hover {
				transform: scale(1.2);
				transition: all 0.5s ease-in-out;
				background-color: antiquewhite;
				cursor: pointer;
			}
			.a1{
				text-decoration: none;
				color: #CC1A1A;
				margin-bottom: 10px;
				display: block;
				
			}
			.a1:hover{
				color: #FA8072;
				cursor: pointer;
			}

		#container{
		 position: relative;
		}




		.addClass1 {

			background-image: url("/images/2.gif");
			/*防止图片没加载出来 使用颜色代替*/

			/*适配图片大小*/
			/* background-size:cover; */
			/*背景图显示方式*/
			background-repeat: no-repeat;
			/*图像定位*/
			background-position: center;
			width: 500px;
			height: 500px;
			display: block;
			background-size:cover;
			border-radius: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);


		}

		</style>

		
	</head>
	<body>
	
				<div id="container1">
		<div id="container" align="center">

		<!-- 默认 src 属性  -->
		<ul id="images" >
	
		</ul>
		<button class="button1" id="button1">添加图片</button>
		<button class="button1" id="button2">返回相册</button>
		<div class="box" id="box"></div>
		</div>
				</div>



<!--		分页数据记录-->
		<path id="current_Page"  th:path="${#request.getAttribute('id')}"   ></path>

<!--	用于获取 传来的相册 ip-->
		<span  class="id1" th:id="${#request.getAttribute('id')}"></span>
		<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
		<script th:src="@{/js/viewer.js}" type="text/javascript"></script>
		<script th:src="@{/js/lazyload.js}" type="text/javascript"></script>
		<script th:src="@{/js/paging.js}" type="text/javascript"></script>

		<script>
			console.clear()

			$("#container1").addClass("addClass1");
			$("#container").hide()


			var page_Size=34; //每页显示34条数据
			var id=$(".id1").attr("id");  //此相册的图片id

			//添加相册内图片
			$("#button1").click(function() {
				location.href = "/image_add.html?id="+id;
			})

			// 返回 主页
			$("#button2").click(function() {

				location.href = "/image.html";
			})



				//images 属性内所有图片都支持放大查看
					var viewer = new Viewer(document.getElementById('images'), {
						url: 'data-original', //需要加载的放大图的属性

					});


			function GetUrlParms() {
				var args = new Object();
				var query = location.search.substring(1); //获取查询串
				var pairs = query.split("&"); //在逗号处断开
				for (var i = 0; i < pairs.length; i++) {
					var pos = pairs[i].indexOf('='); //查找name=value
					if (pos == -1) continue; //如果没有找到就跳过
					var argname = pairs[i].substring(0, pos); //提取name
					var value = pairs[i].substring(pos + 1); //提取value
					args[argname] = unescape(value); //存为属性
				}
				return args;
			}

					var args = new Object();
					args = GetUrlParms();




			var start_Page; //开始页
			var page_Total__Seize; //总页数
			var data_Total_Seize ; //条目总数

				$.get("/albumImageitems/" + id+"/"+1+"/"+page_Size, {}, function(data) {

					console.log(data)

					if (data.data==null){
						$("#container1").removeClass("addClass1");
						$("#container").show()
						return false;
					}

					$.each(data.data.list, function(index, obj) {
						var str = "<li > \
							<img data-original='"+ obj.image +"' title=" + obj.imageDescribe + " id=" + obj.id +
							" class='album lazy' /> \
							<a de="+obj.id+"  class='a1 "+obj.id+"' >删除此图片</a> \
							</li>"

						$("#images").append(str)

					})

					$("#container1").removeClass("addClass1");
					$("#container").show()

					start_Page=data.data.start_Page;
					page_Total__Seize=data.data.page_Total__Seize
					data_Total_Seize=data.data.data_Total_Seize








					var win=function(){
						console.log(document.documentElement.clientWidth)
						if( document.documentElement.clientWidth <= 1500){
							$(".pageWrap").hide()
							// $(".total-pages").hide();
							$(".total-count").hide();


						}

						if(document.documentElement.clientWidth>=1501){
							$(".pageWrap").show()
							// $(".total-pages").show();
							$(".total-count").show()
						}


						if(document.documentElement.clientWidth<=1000){
							console.log("hello")
							$(".last-page").hide();
							$(".jump-text").hide();
							$(".jump-button").hide();
							$("#firstPage").hide();

						}

						if(document.documentElement.clientWidth>=1001){

							$(".lastPage").show()
							$(".jump-text").show()
							$(".jump-button").show();
							$("#firstPage").show();

						}
					}
				// 窗体变化 控制 分页
					$(window).bind("load resize",function(){
						win(); //自适应

					});

					var pd_pa=false;
					var setTotalCount = 301;
					$('#box').paging({

					initPageNo: start_Page, // 初始页码
						totalPages: page_Total__Seize, //总页数
						totalCount: '合计' + data_Total_Seize + '条数据', // 条目总数
						slideSpeed: 600, // 缓动速度。单位毫秒
						jump: true, //是否支持跳转
						callback: function(page) { // 回调函数
							win();  //控制分页控件显示
							console.clear()
							console.log(page);
							if ( pd_pa){

								$("#container1").addClass("addClass1")
								$("#container").hide()

								$("#images").html("");

								$.get("/albumImageitems/" + id+"/"+page+"/"+page_Size, {}, function(data) {

									console.log(data)
									if (data.data==null){
										return false;
									}
									$.each(data.data.list, function(index, obj) {
													var str = "<li > \
										<img data-original='"+ obj.image +"' title=" + obj.imageDescribe + " id=" + obj.id +
															" class='album lazy' /> \
															<a de="+obj.id+" class='a1 "+obj.id+"' >删除此图片</a> \
										</li>"

										$("#images").append(str)
										$("#jumpText").val(page);

									})
									$("#container1").removeClass("addClass1");
									$("#container").show()

									viewer.update();  //刷新预加载
									// 启动  延迟加载
									$("img.lazy").lazyload({
										placeholder: "./1.gif", //用图片提前占位
										// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
										effect: "fadeIn", // 载入使用何种效果
										// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
										threshold: 200, // 提前开始加载
										// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
										container: $("#container"), // 对某容器中的图片实现效果  就是最外层的div 设置id 为 container就行了
										// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
										failurelimit: 10 // 图片排序混乱时
										// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
									})


								})

							}



							pd_pa=true;
						}


					})




					$("body").on("click","#images li .a1 ",function (e) {

						if(!confirm("确认删除-?")){
							return false;
						}

						var imageId= $(this).attr("de")
						if(imageId !== undefined){
							$.get("/albumImageitems/deleteOne",{"albumId":id,"imageId":imageId},function(data){

								console.log(data)

								if(data.flag==true){
									$("#"+imageId).hide()
									$("."+imageId).hide()
								}
							},"json")
						}
					})


			viewer.update(); //刷新预加载




			// 启动  延迟加载
			$("img.lazy").lazyload({
				placeholder: "./1.gif", //用图片提前占位
				// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
				effect: "fadeIn", // 载入使用何种效果
				// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
				threshold: 200, // 提前开始加载
				// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
				container: $("#container"), // 对某容器中的图片实现效果  就是最外层的div 设置id 为 container就行了
				// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
				failurelimit: 10 // 图片排序混乱时
				// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
			})

				}, "json")



			



		
		</script>


	</body>
</html>
